<template>
<view class="container">
  <!-- 引入TabBar组件 -->
	<TabBar :tabs="tabList" :initialSelectedIndex="2" />

<!-- 用户信息区块 -->
		    <view class="user-info-block">
		      <image class="avatar" :src="userInfo.psy_pic" mode="aspectFill"></image>
		      <view class="user-details">
		        <text class="user-name">{{ userInfo.psy_name }}</text>
				<!-- 咨询师身份标识 -->
				<view class="identity-box">
				  <text class="identity-text">咨询师</text>
				</view>
		        <text class="user-id">ID：{{ userInfo.psy_id }}</text>
		      </view>
		    </view>
			
			
			<view class="divider"></view>
			    <!-- 服务时长与帮助人数区块 -->
			    <view class="stats-block">
			      <view class="stat-item">
			        <text class="stat-label">服务时长：</text>
			        <text class="stat-value">{{ userInfo.psy_servetime }} 小时</text>
			      </view>
			      <view class="stat-item">
			        <text class="stat-label">帮助人数：</text>
			        <text class="stat-value">{{ userInfo.psy_helpnum }} 人</text>
			      </view>
			    </view>
			    <view class="divider"></view>
			
		    <!-- 我的预约区块 -->
    <view class="my-appointments-block">
      <text class="block-title">我的预约</text>
      <view class="appointment-items">
        <view class="appointment-item" @click="showAppointmentMessage('正在预约')">
          <uni-icons type="loop" class="icon" size="30" />
          <text class="item-text">正在预约</text>
        </view>
        <view class="appointment-item" @click="showAppointmentMessage('预约完成')">
          <uni-icons type="checkmarkempty" class="icon" size="30" />
          <text class="item-text">预约完成</text>
        </view>
        <view class="appointment-item" @click="showAppointmentMessage('预约历史')">
          <uni-icons type="list" class="icon" size="30" />
          <text class="item-text">预约历史</text>
        </view>
      </view>
    </view>
		
		    <!-- 其他功能区块 -->
		    <view class="other-functions-block">
		      <view class="function-item" @click="navigateToPage('/pages/psy/my/profile')">
		        <uni-icons type="compose" class="icon" size="30" />
                <text class="item-text">编辑资料</text>
		      </view>
              <view class="divider"></view>
		      <view class="function-item" @click="navigateToPage('/pages/psy/my/article')">
		        <uni-icons type="folder-add" class="icon" size="30" />
                <text class="item-text">文章</text>
		      </view>
		      <view class="divider"></view>
		      <view class="function-item" @click="navigateToPage('/pages/other/help')">
		        <uni-icons type="info" class="icon" size="30" />
                <text class="item-text">帮助中心</text>
		      </view>
		      <view class="divider"></view>
		      <view class="function-item" @click="navigateToPage('/pages/other/ask')">
		        <uni-icons type="phone" class="icon" size="30" />
                <text class="item-text">联系客服</text>
		      </view>
		      <view class="divider"></view>
		      <view class="function-item" @click="navigateToPage('/pages/other/aboutUs')">
		        <uni-icons type="email" class="icon" size="30" />
                <text class="item-text">关于我们</text>
		      </view>
		    </view>
		
		    <!-- 退出登录按钮 -->
		    <button class="logout-button" @click="logout">退出登录</button>
</view>
</template>

<script>
import TabBar from '@/pages/components/TabBar.vue';

export default {
    components: {
    TabBar
  },
  data() {
    return {
         userInfo: {
				        psy_pic: '',
				        psy_name: '',
				        psy_id: 1,
				psy_servetime: 0, // 初始化为0，实际值应从后端获取
				psy_helpnum: 0, // 初始化为0，实际值应从后端获取
		 },
	// 定义底部导航条的选项
	tabList: [
	  {
	    pagePath: '/pages/psy/index',
	    text: '首页',
	    icontype: 'home',
	    selectedIcontype: 'home-filled'
	  },
	  {
	    pagePath: '/pages/psy/consult/consult',
	    text: '咨询',
	    icontype: 'calendar',
	    selectedIcontype: 'calendar-filled'
	  },
	  {
	    pagePath: '',
	    text: '我的',
	    icontype: 'person',
	    selectedIcontype: 'person-filled'
	  }
	]
    };
  },
  
  methods:{
// 从后端API获取用户信息
			    async fetchUserInfo() {
			      try {
			        const res = await uni.request({
			          url: `http://127.0.0.1:5001/api_1_0/psyConsultant/${this.userInfo.psy_id}`, 
			          method: 'GET',
			        });
			
			        if (res.statusCode === 200) {
			          // 请求成功，更新userInfo对象
			          this.userInfo = res.data.data[0];
			        } else {
			          // 请求失败，显示错误信息
			          uni.showToast({
			            title: '获取用户信息失败',
			            icon: 'none',
			            duration: 2000,
			          });
			        }
			      } catch (err) {
			        // 请求过程中发生异常，显示错误信息
			        uni.showToast({
			          title: '请求用户信息时发生异常',
			          icon: 'none',
			          duration: 2000,
			        });
			        console.error(err);
			      }
			    },
			    // 导航到指定页面
			    navigateToPage(url) {
			      uni.navigateTo({
			        url:url,
			      });
			    },
			    // 退出登录逻辑
			    logout() {
			      // 退回到登录页面
			      uni.redirectTo({
			        url: '/pages/login/passwd_login', // 替换为登录页面的路径
			      });
			    },
				// 显示预约信息弹窗
    showAppointmentMessage(type) {
      uni.showModal({
        title: '提示',
        content: `查看${type}信息请前往后台`,
        showCancel: false, // 不显示取消按钮
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            console.log('用户点击了确定');
          }
        }
      });
    }
  },
  onLoad() {
    // 页面加载时调用获取用户信息的方法
    this.fetchUserInfo();
  }
}
</script>

<style scoped>
.container {
  padding: 20px;
  padding-bottom: 50px; /* 为了不被TabBar遮挡，留出一些空间 */
}

.user-info-block {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 15px;
}

.user-details {
  display: flex;
  flex-direction: column;
}

.user-name {
  font-size: 18px;
  font-weight: bold;
  margin-right: 10px;
}
.identity-box {
  margin-top: 0;
  padding: 3px 8px; /* 调整内边距使框更小 */
  background-color: #f0f0f0;
  border: 1px solid #ddd; /* 使用实线边框 */
  border-radius: 4px;
  font-size: 0; /* 清除父元素的字体大小影响 */
}

.identity-text {
  font-size: 14px; /* 设置文本字体大小 */
  color: #333;
}
.user-id {
  font-size: 14px;
  color: #666;
}

.my-appointments-block {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.block-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.appointment-items {
  display: flex;
  justify-content: space-around;
}

.appointment-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.icon {
  width: 24px; /* 根据需要调整图标大小 */
  height: 24px;
  margin-right: 10px; /* 控制图标和文字之间的间距 */
}
.function-item {
  display: flex;
  align-items: center;
  padding: 10px 0; /* 添加内边距以控制行高 */
}
.item-text {
  font-size: 16px;
  color: #333;
} 
.logout-button {
  width: 90%;
  padding: 10px 20px;
  background-color: #fff;
  color: #888;
  border: 1px #888;
  border-radius: 10px;
  font-size: 16px;
}

.other-functions-block {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.divider {
  height: 1px;
  background-color: #eee;
  margin: 10px 0; /* 控制分隔线上下的间距 */
}
.stats-block {
  display: flex;
  flex-direction: column;
}

.stat-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.stat-label {
  font-size: 16px;
  color: #333;
}

.stat-value {
  font-size: 16px;
  font-weight: bold;
  color: #666;
}

.page-content {
  padding: 20px;
  text-align: center;
}
</style>